<template>
    <qf-table :columns="columns" :tableData="tableData" :tableLoading="tableLoading">
        <!-- 产品图片 -->
        <template v-slot:imageUrl="{ row }">
            <img :src="row.imageUrl" alt="" height="30">
        </template>
        <template v-slot:action="{ row }">
            <el-button type="success" @click="goPreOrder(row)">
                <el-icon>
                    <CreditCard />
                </el-icon>
                充值
            </el-button>
        </template>
    </qf-table>
</template>

<script setup>
import qfTable from "@/components/qfTable/index.vue"
import * as api from "@/api/vip.js"
import { CreditCard } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus"
import { useRouter } from "vue-router";


let router = useRouter()

// 动态定义表头

let columns = [
    {
        label: '产品图片',
        prop: "imageUrl"
    },
    {
        label: '产品名称',
        prop: "productName"
    },
    {
        label: '产品描述',
        prop: "description"
    },
    {
        label: '产品价格',
        prop: "price"
    },
    {
        label: '库存',
        prop: "inventory"
    },
    {
        label: "充值",
        prop: "action"
    }
]

// 声明一个数据用于注入表格
let tableData = ref()

let tableLoading = ref(false)
// 封装获取产品的方法
let getList = async () => {
    tableLoading = true
    try {
        let res = await api.getVip()
        console.log(res);
        tableData.value = res.data.data.reverse().slice(12)
        console.log(tableData.value);
        tableLoading = false
    } catch (e) {
        console.log(e);
        tableLoading = false
    }
}

onMounted(() => {
    getList()
})

// 跳转到下单页面

let goPreOrder = (row) => {
    // 使用弹框提示用户是否购买
    ElMessageBox.confirm("是否购买" + row.productName + '?', '购买提示', {

        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',

    })
        .then(async () => {
            // 用户点击确认
            // 直接获取当前产品 ID 传递给下一个页面 跳转到预支付页面
            router.push({ path: "/preOrder", query: { product_id: row.product_id } })
        })
        .catch(() => {
            // 点击了取消
            ElMessage({
                type: "warning",
                message: "已取消购买"
            })
        })

}
</script>
<script>
export default {
    meta: { title: 'vipCharge', name: 'vip充值', routeName: "vipCharge", icon: "#icon-chongzhi" }
}
</script>
